---
section: 1-Getting started
name: Writing CSS
order: 4
---

# Writing CSS

Write CSS using objects and objects with the `css` and `cssMap` APIs in Compiled.

```tsx
import type { ReactNode } from 'react';
import { css } from '@compiled/react';

type CardProps = {
  children: ReactNode;
};

const cardStyles = css({
  backgroundColor: 'blue',
  boxShadow: token('elevation.shadow.raised'),
  padding: token('space.100'),
});

const Card = ({ children }: CardProps) => <div css={cardStyles}>{children}</div>;
```

Atlassian employees should use [Atlassian Design System tokens](https://atlassian.design/tokens/design-tokens) instead of plain string values.

Depending on your configuration, you might need `/** @jsxImportSource @compiled/react */` or `/** @jsx jsx */` at the start of your file -- see [Installation](/installation) for more details.

## Writing pseudo-selectors

The `&` character references the parent selector(s). If there is no parent selector, it references the element that the `css`/`cssMap`/`styled` function call is applied on.

We can use this to define pseudo-selectors and pseudo-elements. In the example below, the two selectors (textarea and input) both alter the color on the `:hover` pseudo selector.

```jsx
const styles = css({
  color: '#a7a7a7',
  '&:hover': {
    color: '#000',
  },
});

const CustomBox = () => <div css={styles}>Custom box</div>;
```

is processed into:

```tsx
const CustomBox = () => <div className="_syazswos _30l3r3uz">Custom box</div>;
```

```css
._syazswos {
  color: #a7a7a7;
}
._30l3r3uz:hover {
  color: #000;
}
```

We recommend only using this on the current element, to minimise superfluous styles being generated in the stylesheet. For example, `&:hover` and `&::after` are okay, but `&:hover div` or `div &:hover` are not.

## Writing more complex components

See the [UI Styling Standard migration guide](https://atlassian.design/components/eslint-plugin-ui-styling-standard/migration-guide) for a detailed guide on how to write your styles in Compiled.

## Vendor prefixing

[Auto-prefixing](https://github.com/postcss/autoprefixer) CSS declarations enables us to ignore slight browser differences and instead concentrate on the experiences we're developing.

If we had this style:

```tsx
const styles = css({
  userSelect: 'none',
});
```

Compiled will first convert it into this CSS:

```css
user-select: none;
```

It will then add auto-prefixes, as necessary:

```css
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
```
